<template>
	<view class="warp">
		<!-- 顶部筛选 start -->
		<view class="top_search">
			<uv-input placeholder="搜索老师名称" prefixIcon="search" v-model="keyword" prefixIconStyle="font-size: 22px;color: #909399">
				<template v-slot:suffix>
					<uv-button type="default" @click="search" size="mini" :hairline="true" color="#F1F1F5" :customTextStyle="{color:'#323233',fontSize:'14px'}" text="搜索"></uv-button>
				</template>
			</uv-input>
		</view>
		<!-- 顶部筛选 end -->
		<uv-gap height="46" bgColor="#F1F1F5"></uv-gap>
		<!-- 列表盒子 start -->
		<view class="author_list">
			<view class="author_item" v-for="(v,k) in rows" :key="k" @click="jumpUrl('/pages/author/details?id='+v.id)">
				<view class="author_l">
					<image :src="v.image" mode="aspectFit"></image>
				</view>
				<view class="author_r">
					<view class="author_top">
						<view class="author_title">
							{{v.name}}
						</view>
						<view class="aurhor_desc line_2">
							{{v.content}}
						</view>
					</view>
					<view class="author_bottom">
						<view class="" v-if="v.course_num == 0">
							暂无课程
						</view>
						<view class="course_num" v-else>
							共{{v.course_num}}课时
						</view>
					</view>
				</view>
			</view>
			<uv-load-more :status="apiStatus" />
		</view>
		<!-- 列表盒子 end -->
		
		<!-- 底部tabbar start -->
		<bastTabbar :tabbar_index="1000"></bastTabbar>
		<!-- 底部tabbar end -->
		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" z-index="1000" top="200"></uv-back-top>
	</view>
</template>

<script>
	import bastTabbar from '@/component/base-tabbar.vue'
	export default {
		components: {
			bastTabbar,
		},
		onReachBottom() {
			console.log('onReachBottom')
			this.page += 1
			this.get_rows()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		onLoad() {
			this.get_rows()
		},
		data() {
			return {
				scrollTop: 0,
				rows: [],
				keyword: '',
				//
				page: 1,
				pagesize: 10,
				apiMore: true,
				apiStatus: 'loadmore',
				apiPost: false,
			}
		},
		methods: {
			search(){
				this.page = 1
				this.apiMore = true
				this.apiStatus = 'loadmore'
				this.apiPost = false
				this.rows = []
				this.get_rows()
			},
			async get_rows() {
				if (this.apiPost || this.apiMore===false) {
					return false
				}
				const res = await this.$myRequest({
					url: "author/lst",
					type: "post",
					data: {keyword:this.keyword,page:this.page,pagesize:this.pagesize},
				});
				if(res.code){
					this.apiMore = res.data.length < this.pagesize ? false : true
					this.apiStatus = res.data.length < this.pagesize ? "nomore" : "loadmore"
					this.rows = this.rows.length > 0 ? [...this.rows, ...res.data] : res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error"
					})
					this.apiMore = false
					this.apiStatus = 'nomore'
				}
			}
		}
	}
</script>

<style lang="scss">
	.warp{
		background-color: #FFF;
		min-height: 100vh;
		max-width: 1600rpx;
		margin: auto;
		// 筛选顶部
		.top_search {
			position: fixed;
			background-color: #FFF;
			z-index: 1000;
			width: 100%;
			max-width: 1600rpx;
			padding: 4rpx;
			::v-deep .uv-button{
				padding: 13px 8px;
			}
		}
		// 列表盒子
		.author_list{
			background-color: #F1F1F5;
			padding: 20rpx 20rpx 20rpx 20rpx;
			.author_item{
				margin-bottom: 20rpx;
				display: flex;
				background-color: #FFF;
				padding: 20rpx;
				.author_l{
					margin-right: 20rpx;
					image{
						width: 200rpx;
						height: 200rpx;
						border-radius: 20rpx;
					}
				}
				.author_r{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					.author_top{
						flex: 1;
						.author_title{
							font-weight: bold;
							font-size: 32rpx;
							color: #333;
						}
						.aurhor_desc{
							color: #999;
						}
					}
					.author_bottom{
						color: #999;
						font-size: 24rpx;
						.course_num{
							color: #3cbfb5;
						}
					}
				}
			}
		}
		// 详情
		
	}
</style>